<template>
    <div class="post-nav visible-pc">
        <div class="post-catalog">
            <div class="post-title">目录</div>
            <div class="nav-body">
                <div class="highlight-title" style="display: block; top: 0; height: 27px;"></div>
                <ul>
                    <li class="active"><a>效果预览</a></li>
                    <li><a>可交互视频</a></li>
                    <li><a>源代码下载</a></li>
                    <li><a>代码解读</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'news-catalog'
}
</script>

<style lang="scss" scoped>
.active {
    color: #42b983;
}
.post-nav {
    position: sticky;
    top: 0;
    padding: 10px 0;
    background: #fff;
}
.post-catalog {
    position: relative;
    top: 0;
    max-width: 250px;
    line-height: 1.5;
    border-left: 1px solid #ccc;
    box-shadow: 0 0 0 #fff;
}
.post-title {
    font-weight: bold;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 16px;
}
.nav-body {
    position: relative;
    padding: 0 18px;
}
ul {
    position: relative;
    padding-left: 18px;
    margin: 0;
    list-style-type: square;
    z-index: 2;
    li {
        line-height: 27px;
    }
}
.highlight-title {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    background: #f3f3f3;
    z-index: 1;
    border-left: 2px solid #42b983;
    transition: all .2s ease;
}
</style>